<template>
	<view class="win-top">
		<view class="top-the-left">
			<view class="search-for-piece">
				<view class="search-for-piece-menu" @click="clickZhedie" >
					<text class="iconfont icon-caidan"></text>
				</view>
				<view class="search-for-piece-input"
					:class="isSearch ? 'search-select' :''"		
				>
					<u-input v-model="value" type="text" :border="false" :trim="true"
						placeholder="请输入您要查找的内容..." 
						@focus="this.isSearch = true ;"
						@blur="this.isSearch = false ;"
					/>
				</view>
			</view>
		</view>
		<view class="top-the-right">
			<view class="notice">
				<view class="notice-element">
					<text class="iconfont icon-xinfeng"></text>
				</view>
				<view class="notice-element">
					<text class="iconfont icon-tongzhizhongxin"></text>
				</view>
				<view class="notice-element">
					{{userInfo.nickname}} &nbsp;
					<view class="notice-element" style="font-size:12px;color:#23b7e5;margin-top:5px;" 
						@click="logout"
					>
						<text class="iconfont icon-tuichu" style="font-size:14px;color:#21afda" ></text>
						<text>退出</text>
					</view>
				</view>
			</view>
		</view>
	</view>


</template>
<script>
	export default {
		data(){
			return {
				value:'',
				isSearch:false,
				userInfo:{},
				eventFolds:false,
			}
		},
		watch:{
			getShopStore(){
				this.userInfo = uni.getStorageSync('uni-id-pages-userInfo');
			}
		},
		created() {
			this.userInfo = uni.getStorageSync('uni-id-pages-userInfo');
			this.$store.dispatch("fetchInfoData") ;
		},
		computed: {
			getShopStore(){
				return this.$store.state.userInfo
			},
		},
		methods:{
			logout(){
				uni.showModal({
					title:"您确认退出吗?",content:"退出后不再接收任何信息,请慎重"
				}).then(res =>  {
					if(!res.confirm) return ;
					this.$store.commit("SET_OUT_LOGIN", { user:null })
				})
			},
			clickZhedie() {
				let bool = this.$store.state.eventFold;
				console.log(bool)
				if (bool) {
					uni.setLeftWindowStyle({
						width: '210px',
						"margin-top": "-50px",
						"zIndex": 9,
						transition: ".5s"
					})
					uni.setTopWindowStyle({
						"height": "50px",
						"margin-left": "210px",
						"zIndex": 9,
						transition: ".5s"
					})
				} else {
					uni.setLeftWindowStyle({
						width: '70px',
						"margin-top": "-50px",
						"zIndex": 9,
						transition: ".5s"
					})
					uni.setTopWindowStyle({
						"height": "50px",
						"margin-left": "70px",
						"zIndex": 9,
						transition: ".5s"
					})
				}
				this.eventFolds = !this.eventFolds
				this.$store.commit("SET_FOLD_EVENT", this.eventFolds)
			},
		}
	}
</script>
<style lang="scss" scoped>
	.top-the-left{
		flex:1;
		.search-for-piece-input{
			padding:0 10px;
			border-bottom: 1px solid #fff;
			width:40%;
		}
		.search-select{
			transition: .5s;
			border-bottom: 1px solid $uni-color-primary;
		}
		.search-for-piece{
			display: flex;
			align-items: center;
			height:100%;
			gap:20px;
			padding-left:20px;
			.search-for-piece-menu{
				color:#fff;
				padding:5px 8px;
				border-radius: 3px;
				background-color:$uni-color-primary;
				.iconfont{
					font-size:22px;
					font-weight: bold;
				}
			}
			.search-for-piece-menu:hover{
				cursor:pointer;
				transition:.5s;	
				color:$uni-bg-color-grey;
				background: #19a9d5;
			}
		}
	}
	.top-the-right{
		flex:1;
		display: flex;
		justify-content: flex-end;
		padding-right:20px;
		.notice{
			display: flex;
			align-items: center;
			height:100%;
			gap:25px;
			cursor: pointer;
			.notice-element{
				display: flex;
				align-items: center;
				.iconfont{
					color:$uni-text-color-placeholder;
					font-size:22px;
				}
			}
		}
	}
.win-top {
	display: flex;
	height:50px;
	box-shadow: 0 1px 10px 0 #f0f0f0;
	background:#fff;
}
</style>